import { StatisticCard } from '@ant-design/pro-components';
import { Image } from 'antd';
import React from 'react';

const { Statistic } = StatisticCard;

interface Props {
  data?: number;
  title: string;
  subTitle: string;
  subData?: number;
  icon?: any;
  subIcon?: any;
}

const SumTotalCard: React.FC<Props> = (props) => {
  const { data, title, subData, subTitle, icon, subIcon } = props;

  return (
    <StatisticCard
      statistic={{
        title: title,
        value: data,
        precision: 2,
        prefix: '¥',
        icon: (
          <Image preview={false} width={40} height={40} src={icon} alt="icon" />
        ),
      }}
      chart={
        <>
          <Statistic
            icon={
              <Image
                preview={false}
                width={40}
                height={40}
                src={subIcon}
                alt="icon"
              />
            }
            layout="vertical"
            title={subTitle}
            precision={2}
            value={subData}
            prefix={'¥'}
          />
        </>
      }
    />
  );
};
export default SumTotalCard;
